<template>
  <v-list density="compact" nav>
    <template v-for="item in items" :key="item[idField]">
      <v-list-item
        :value="item[idField]"
        :active="item[idField] === selectedId"
        @click="() => $emit('select', item)"
        style="cursor:pointer;"
      >
        <v-list-item-title>
          {{ item[labelField] }}
        </v-list-item-title>
      </v-list-item>
      <div v-if="item.children && item.children.length" style="padding-left: 16px;">
        <TreeList
          :items="item.children"
          :selected-id="selectedId"
          :id-field="idField"
          :label-field="labelField"
          @select="$emit('select', $event)"
        />
      </div>
    </template>
  </v-list>
</template>

<script setup>
const props = defineProps({
  items: { type: Array, required: true },
  selectedId: { type: [String, Number], default: null },
  idField: { type: String, default: 'menu_id' },
  labelField: { type: String, default: 'menu_name' }
})
defineEmits(['select'])
</script> 